<div class="getting-started-panel">
  <div class="panel-heading" role="button" data-bs-toggle="collapse"
    data-bs-target="#getting-started-content">
    <a href="#"><i class="fa fa-rocket"></i> Getting Started with Microcks?</a>
  </div>
  <div class="collapse" [class.in]="!isTestsPanelDisplayed()" id="getting-started-content">
    <div class="jumbotron clearfix">
      <div class="row">
        <div class="col-xs-5">
          <h1 class="arvo">The communication and runtime tool for your APIs &amp;
            <span class="hl">Micro</span>-services Mo<span class="hl">cks</span>
          </h1>
        </div>
        <div class="col-xs-7" align="right">
          <!-- <img alt="Microcks" src="./assets/microcks-big.png" style="width: 30%; height: 30%" /> -->
          <img alt="Microcks" src="./assets/microcks-logo-blue-baseline-tweet.png" style="width: 80%; height: 80%" class="dark:hidden" loading="lazy"/>
          <img alt="Microcks" src="./assets/microcks-logo-white-baseline-tweet.png" style="width: 80%; height: 80%" class="light:hidden" loading="lazy"/>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2" align="right">
        <a routerLink="/services" class="btn btn-lg btn-success" type="button">APIs | Services</a>
      </div>
      <div class="col-xs-4">
        <blockquote>Browse, get information and request/response mocks on Microcks managed APIs &amp; Services.
        </blockquote>
      </div>
      <div class="col-xs-2" align="right">
        <a routerLink="/importers" class="btn btn-lg btn-primary" type="button">Importers</a>
      </div>
      <div class="col-xs-4">
        <blockquote>Visualize, create or edit a new Importer Job for filling Microcks with mocks and samples.
        </blockquote>
      </div>
    </div>
  </div>
</div>

<div class="megatron clearfix" *ngIf="isRepositoryPanelDisplayed()">
  <div class="row">
    <div class="col-md-4">
      <pfng-card [config]="repositoryCardConfig">
        <pfng-donut-chart [chartData]="repositoryDonutChartData"
          [config]="repositoryDonutChartConfig"></pfng-donut-chart>
      </pfng-card>
    </div>
    <div class="col-md-4">
      <pfng-card [config]="topCardConfig" (onFilterSelect)="handleTopFilterSelect($event)">
        <ol>
          <li *ngFor="let stat of topInvocations">
            <blockquote class="text-right top-invocation">
              <p class="top-invocation">{{ stat.serviceName }} - {{ stat.serviceVersion }}</p>
              <small>with {{ stat.dailyCount }} <a
                  routerLink="['/metrics/invocations', stat.serviceName, stat.serviceVersion]">invocations</a> <i
                  class="glyphicon glyphicon-signal"></i></small>
            </blockquote>
          </li>
        </ol>
      </pfng-card>
    </div>
    <div class="col-md-4">
      <pfng-card [config]="chartCardConfig" (onFilterSelect)="handleChartFilterSelect($event)">
        <pfng-sparkline-chart [config]="chartConfig" [chartData]="chartData"></pfng-sparkline-chart>
      </pfng-card>
    </div>
  </div>
</div>

<div class="megatron clearfix" *ngIf="isTestsPanelDisplayed()">
  <div class="row">
    <div class="col-md-8">
      <pfng-card [config]="testConformanceCardConfig">
        <app-score-treemap [data]="conformanceScores" scoreAttr="score" [block]="repositoryFilterFeatureLabelKey()"
          elements="API | Services"
          legend="The lower score the riskier in terms of non conformance"></app-score-treemap>
      </pfng-card>
    </div>
    <div class="col-md-4">
      <pfng-card [config]="testResultsCardConfig" (onFilterSelect)="handleTestsFilterSelect($event)">
        <pfng-donut-chart [chartData]="testResultsDonutChartData"
          [config]="testResultsDonutChartConfig"></pfng-donut-chart>
      </pfng-card>
    </div>
  </div>
</div>
<br />